<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <child content="hello world"></child>
    </div>

    <script>
        // 1.定义一个子组件
        Vue.component("child", {
            // props: ['content'],
            props: {
                // 接受类型检测
                //content:String   //参数检验：子组件接收到的content必须是String
                //content:[Number,String]  // 传过来的参数要么是字符串，要么是数字
                // 更复杂的形式
                content: {
                    type: String,
                    required: true,// 必须传递content给子组件
                    default: "default value",  // 不传content是默认content的值默认是default value
                    validator: function (value) {  // 传入的content长度必须大于5
                        return (value.length > 5)
                    }
                }
            },
            template: "<div>{{content}}</div>"
        })


        var vm = new Vue({
            el: "#app",
            data: {

            },
        })
    </script>
</body>

</html>